import React, { Component } from 'react';
import { TextInput, ScrollView, View, Image, RefreshControl, Text, TouchableOpacity, PermissionsAndroid, StyleSheet } from 'react-native';
import { unitWidth } from '../constants/AdapterUtil';
import { MyHeader, MyRightImageHeader } from '../components/MyHeader';
import { postFetch } from '../constants/HttpExtension';
import Colors from '../constants/Colors';
import { SubmitButton, SubmitButton1 } from '../components/Button';
import { show } from '../constants/Toast';
import { BottomBankChooseModal } from '../components/Modal';
import { MyTextView } from '../components/MyTextView';
import TextUtil from '../constants/TextUtil';
import { api_member_info_bankList, api_member_withdraw_submit } from '../constants/HttpServices';

export default class WithdrawalScreen extends Component {

    constructor(props) {
        super(props)
        this.state = {
            userInfo: global.userInfo,
            money: '',
            currentChoose: 0,
            withdrawMoney: global.userInfo.credit2,
            bankList: [],
        }
    }

    componentDidMount() {
        this.props.navigation.addListener('didFocus', payload => {
            this.getBankList();
        })
    }


    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', backgroundColor: Colors.colorF5 }}>
                <MyHeader title='提现' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }} />
                <ScrollView style={{ alignSelf: 'stretch' }}>
                    <View style={{ alignSelf: 'stretch', height: 140 * unitWidth, backgroundColor: Colors.white, marginTop: 5 * unitWidth }}>
                        <Text style={{ fontSize: 14, color: Colors.black, marginLeft: 20 * unitWidth, marginTop: 16 * unitWidth }}>提现金额</Text>
                        <View style={{ flexDirection: 'row', alignSelf: 'stretch', marginHorizontal: 20 * unitWidth, marginTop: 14 * unitWidth, alignItems: 'center' }}>
                            <Text style={{ fontSize: 30 }}>¥</Text>
                            <TextInput
                                style={{ fontSize: 25 }}
                                onChangeText={this.onMoneyTextChange.bind(this)}
                                keyboardType='numeric'
                                maxLength={20}
                                placeholder='请输入提现金额'
                                value={this.state.money}
                            />
                        </View>
                        <View style={{ flexDirection: 'row', alignSelf: 'stretch', marginHorizontal: 20 * unitWidth, marginTop: 6 * unitWidth, alignItems: 'center' }}>
                            <Text style={{ fontSize: 13 }}>可提现金额：</Text>
                            <Text style={{ fontSize: 16, color: Colors.colorRed }}>¥{this.state.withdrawMoney}</Text>
                            <TouchableOpacity onPress={() => {
                                this.setState({ money: this.state.withdrawMoney + '' })
                            }}>
                                <Text style={{
                                    borderColor: Colors.transparent,
                                    borderWidth: 0.5,
                                    borderBottomColor: Colors.color99,
                                    marginLeft: 5 * unitWidth
                                }}>全部提现</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={{
                        backgroundColor: Colors.white, height: 50 * unitWidth, paddingHorizontal: 20 * unitWidth,
                        marginTop: 5 * unitWidth, flexDirection: 'row', alignItems: 'center'
                    }}>
                        <Text style={{ color: Colors.color33, fontSize: 14 }}>到账银行：</Text>
                        {this.state.bankList.length <= 0 ?
                            <Text style={{
                                color: Colors.blue, fontSize: 14,
                                borderBottomColor: Colors.blue, borderBottomWidth: 0.5
                            }} onPress={() => { this.props.navigation.navigate('AddBank') }}>去绑定</Text>
                            :
                            <Text style={{
                                color: Colors.blue, fontSize: 14,
                            }} onPress={() => { this.refs.BottomBankChooseModal.showModal(); }}>
                                {this.state.bankList[this.state.currentChoose].name + '(' + TextUtil.getEnd4(this.state.bankList[this.state.currentChoose].card_number) + ')'}
                            </Text>}
                    </View>
                    <SubmitButton1 style={{ marginTop: 258 * unitWidth, alignSelf: 'center' }} text='提现' onPress={this.doWithdraw.bind(this)} />
                </ScrollView>
                <BottomBankChooseModal
                    ref='BottomBankChooseModal'
                    bankList={this.state.bankList}
                    onChoose={this.onChoose.bind(this)} />
            </View>
        );
    }

    getBankInfo() {
        let len = this.state.bankInfo.card_number.length;
        return (
            <Text style={{ alignSelf: 'flex-start', marginLeft: 15 * unitWidth, marginTop: 15 * unitWidth }}>*{this.state.bankInfo.opening_bank + '(' + this.state.bankInfo.card_number.substring(len - 4, len) + ')'}</Text>
        )
    }

    onChoose(index) {
        this.setState({
            currentChoose: index,
        })
    }

    onMoneyTextChange(text) {
        this.setState({
            money: TextUtil.getTextInput(text, 2)
        })
    }

    //获取
    getBankList() {
        let params = {

        }
        postFetch(api_member_info_bankList, params, {
            success: (response) => {
                this.setState({
                    bankList: response.result,
                })
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }

    //获取可提现金额
    getMoney() {
        // let params = {

        // }
        // postFetch(api_Members_Withdrawable, params, {
        //     success: (response) => {
        //         this.setState({
        //             withdrawMoney: response.result.money
        //         })
        //     },
        //     fail: (response) => {
        //         show(response.msg);
        //     }
        // })
    }

    //提现
    doWithdraw() {
        if (this.state.money == '') {
            show('请输入提现金额');
            return
        } else if (!this.state.bankList[this.state.currentChoose]) {
            show('请选择银行卡');
            return
        }
        let params = {
            'id': this.state.bankList[this.state.currentChoose].id,
            'money': this.state.money,
        }
        postFetch(api_member_withdraw_submit, params, {
            success: (response) => {
                show('提交成功');
                this.props.navigation.pop();
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}

const styles = StyleSheet.create({
    chooseBorderStyle: {
        borderColor: Colors.meYellow,
        width: 335 * unitWidth,
        height: 55 * unitWidth,
        borderWidth: 0.5,
        borderRadius: 30,
        alignSelf: 'center',
        marginTop: 20 * unitWidth,
        alignItems: 'center',
        flexDirection: 'row'
    },
    noChooseBorderStyle: {
        borderColor: Colors.color99,
        width: 335 * unitWidth,
        height: 55 * unitWidth,
        borderWidth: 0.5,
        borderRadius: 30,
        alignSelf: 'center',
        marginTop: 20 * unitWidth,
        alignItems: 'center',
        flexDirection: 'row'
    },
    chooseTextStyle: {
        color: Colors.meYellow,
        marginLeft: 15 * unitWidth
    },
    noChooseTextStyle: {
        color: Colors.color99,
        marginLeft: 15 * unitWidth
    }
})